import Vue from 'vue'
import store from '@/store' //项目的vuex实例
import drawerComp from './_drawerComp.vue' // 抽屉弹窗外框组件

const POPUP = Vue.extend(drawerComp)

// 按esc监听事件缓存
let escClose = []

// 删除方法
let removeIns = (instance) => {
    // 先清理当前的事件
    window.removeEventListener('keydown', escClose[escClose.length - 1])
    // 然后重新绑定上一次的事件
    window.addEventListener('keydown', escClose[escClose.length - 2])
    // 并删除退出的事件
    escClose.splice((escClose.length - 1), 1)
    // 删除vue实例及dom对象
    instance.vm.$destroy()
    document.body.removeChild(instance.vm.$el)
}

let drawer = (options) => {
    const instance = new POPUP({
        propsData: options,
        store
    })
    instance.vm = instance.$mount()
    document.body.appendChild(instance.vm.$el)

    // 全局配置,默认开启Esc关闭功能
    if (Vue.config.drawerEsc!==false) {

        if(!options.disableEsc){
            // 创建一个新的关闭方法, 保存到缓存数组中
            escClose.push((e) => {
                // 按 esc键也可以退出
                if (e.key === 'Escape') {
                    if (instance.vm.closeBtn) {
                        instance.vm.close()
                    }
                }
            })

            // 为了保持只有当前页面的监听执行,必须先清理上一次页面的监听事件
            if (escClose.length > 1) {
                window.removeEventListener('keydown', escClose[escClose.length - 2])
            }
            // 然后重新绑定最新的事件
            window.addEventListener('keydown', escClose[escClose.length - 1])
        }

    }


    instance.vm.$on('drawer_closed', () => {
        //点击关闭按钮后删除vue对象及dom对象
        removeIns(instance)
    })
    return instance.vm
}

export default {
    install(Vue) {
        Object.defineProperty(Vue.prototype.$bui, 'drawer', {
            value: drawer
        })
    }
}

